<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"  
    xmlns:h="http://java.sun.com/jsf/html"  
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    template="/plantillas/plantilla-simple.xhtml">
    <ui:define name="cabecera">
        <title>Búsqueda</title>
    </ui:define>
    <ui:define name="contenido">
        <p:tabView id="pestanya" orientation="left">
            <p:tab title="Búsqueda">
                <p:panel header="Búsqueda" style="font-size: 110%; text-align: center">
                    <center>
                        <h:panelGrid style="margin-bottom:10px" cellpadding="5" columns="3">
                            <h:outputLabel for="nombres" value="Seleccione un tipo de nombre:" style="font-weight:bold"/>
                            <p:selectOneMenu style="width:160px; font-size: 100%">
                                <f:selectItem itemLabel="Seleccione" itemValue="" />
                                <f:selectItem itemLabel="Nombre científico" itemValue="1" />
                                <f:selectItem itemLabel="Nombre común" itemValue="2" /> 
                                <f:selectItem itemLabel="Otros nombres" itemValue="3" /> 
                            </p:selectOneMenu>
                            <p:inputText id="nombres" style="width:160px; font-size: 100%"/>
                            <h:outputLabel for="lugares" value="Seleccione un lugar:" style="font-weight:bold"/>
                            <p:selectOneMenu style="width:160px; font-size: 100%">  
                                <f:selectItem itemLabel="Departamento" itemValue="" />  
                                <f:selectItem itemLabel="Santa Ana" itemValue="1" />  
                                <f:selectItem itemLabel="Ahuachapán" itemValue="2" />
                                <f:selectItem itemLabel="Sonsonate" itemValue="3" />
                                <f:selectItem itemLabel="La Libertad" itemValue="4" />  
                                <f:selectItem itemLabel="Chalatenango" itemValue="5" />  
                                <f:selectItem itemLabel="San Salvador" itemValue="6" />  
                                <f:selectItem itemLabel="Cuscatlán" itemValue="7" /> 
                                <f:selectItem itemLabel="La Paz" itemValue="8" />  
                                <f:selectItem itemLabel="San Vicente" itemValue="9" />  
                                <f:selectItem itemLabel="Cabañas" itemValue="10" /> 
                                <f:selectItem itemLabel="Usulután" itemValue="11" />  
                                <f:selectItem itemLabel="San Miguel" itemValue="12" />  
                                <f:selectItem itemLabel="Morazán" itemValue="13" /> 
                                <f:selectItem itemLabel="La Unión" itemValue="14" /> 
                            </p:selectOneMenu>
                            <p:selectOneMenu style="width:160px; font-size: 100%">  
                                <f:selectItem itemLabel="Municipio" itemValue="" />  
                                <f:selectItem itemLabel="San Salvador" itemValue="1" />  
                                <f:selectItem itemLabel="Santa Tecla" itemValue="2" />
                            </p:selectOneMenu>
                            <h:outputLabel for="clasificacion" value="Seleccione una clasificación animal:" style="font-weight:bold"/> 
                            <p:selectOneMenu style="width:160px; font-size: 100%">
                                <f:selectItem itemLabel="Seleccione" itemValue="" />
                                <f:selectItem itemLabel="Vertebrados" itemValue="1" />
                                <f:selectItem itemLabel="Invertebrados" itemValue="2"/>
                            </p:selectOneMenu>
                            <h:outputLabel for="division" value="" style="font-weight:bold"/>
                            <h:outputLabel for="division" value="Seleccione una división animal:" style="font-weight:bold"/> 
                            <p:selectOneMenu style="width:160px; font-size: 100%">
                                <f:selectItem itemLabel="Seleccione" itemValue="" />
                                <f:selectItem itemLabel="Mamíferos" itemValue="1" />
                                <f:selectItem itemLabel="Aves" itemValue="2" />
                                <f:selectItem itemLabel="Reptiles" itemValue="3" />
                                <f:selectItem itemLabel="Moluscos" itemValue="4" />
                                <f:selectItem itemLabel="Insectos" itemValue="5" />
                                <f:selectItem itemLabel="Peces" itemValue="6" />
                            </p:selectOneMenu>
                            <h:outputLabel for="division" value="" style="font-weight:bold"/>
                            <h:outputLabel for="habitat" value="Seleccione un hábitat:" style="font-weight:bold"/> 
                            <p:selectOneMenu style="width:160px; font-size: 100%">
                                <f:selectItem itemLabel="Seleccione" itemValue="" />
                                <f:selectItem itemLabel="Agua" itemValue="1" />
                                <f:selectItem itemLabel="Tierra" itemValue="2"/>
                            </p:selectOneMenu>
                            <h:outputLabel for="division" value="" style="font-weight:bold"/>
                        </h:panelGrid>
                        <p:commandButton value="Buscar" style="font-size: 100%" icon="ui-icon-search"/>
                    </center>
                </p:panel>
            </p:tab>
            <p:tab title="Resultados">
                <p:panel header="Resultados" style="font-size: 110%; text-align: center">
                    <center>
                        <p:dataTable emptyMessage="No se encuentra la información.">
                            <p:column id="modelHeader">  
                                <f:facet name="header">  
                                        Nombre científico 
                                </f:facet>  
                                <h:outputText value="#" />  
                            </p:column> 
                            <p:column id="modelHeader">  
                                <f:facet name="header">  
                                        Nombre común  
                                </f:facet>  
                                <h:outputText value="#" />  
                            </p:column> 
                            <p:column id="modelHeader">  
                                <f:facet name="header">  
                                        Nombres conocidos 
                                </f:facet>  
                                <h:outputText value="#" />  
                            </p:column> 
                            <p:column id="modelHeader">  
                                <f:facet name="header">  
                                        Departamento 
                                </f:facet>  
                                <h:outputText value="#" />  
                            </p:column> 
                            <p:column id="modelHeader">  
                                <f:facet name="header">  
                                        Municipio 
                                </f:facet>  
                                <h:outputText value="#" />  
                            </p:column> 
                        </p:dataTable>
                    </center>
                </p:panel>
            </p:tab>
        </p:tabView>
    </ui:define>  
</ui:composition>

